<template>
	<div>
		<div id="main" style="width: 600px;height:400px;"></div>
	</div>
</template>

<script>
	import reportsApi from "@/api/reports.js"
	export default{
		data(){
			return{
				
			}
		},
		methods:{
			get(){
				this.$axios.get("reports/type/1")
				.then(res=>{
					 if(res.meta.status==200){
						this.echartsList=res.data
						console.log(this.echartsList);
						this.initEacharts()
						
					}
				})
			},
			 initEacharts(){
				var myChart = this.$echarts.init(document.getElementById('main'));				var option = {
					title: {
						text: '用户来源'
					},
					tooltip: {
						trigger: 'axis',
						axisPointer: {
							type: 'cross',
							label: {
								backgroundColor: '#6a7985'
							}
						}
					},
					legend: this.echartsList.legend,
					toolbox: {
						feature: {
							saveAsImage: {}
						}
					},
					grid: {
						left: '3%',
						right: '4%',
						bottom: '3%',
						containLabel: true
					},
					xAxis: [
						{   
							type: 'category',
							 boundaryGap: false,
							 data:this.echartsList.xAxis[0].data
						}
					],
					yAxis: this.echartsList.yAxis,
					series: this.echartsList.series,
				};					myChart.setOption(option);
			      },
		},
		created() {
			this.get()
		}
	}
</script>

<style>
</style>
